<template>
  <div class="app-container">
    <el-form
      v-if="showSearch"
      class="grid column_4"
      ref="queryForm"
      size="small"
      label-width="140px"
      :model="formState"
    >
      <el-form-item class="grid-item mr_unset" label="证件号码">
        <el-input v-model="formState.idNumber" placeholder="请输入证件号码" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="姓名">
        <el-input v-model="formState.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="性别">
        <el-select
          v-model="formState.gender"
          class="input-block"
          placeholder="请选择性别"
        >
          <el-option
            v-for="item in genders"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option
        ></el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="年龄">
        <el-input v-model="formState.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="现住完整详细地址">
        <el-input
          v-model="formState.address"
          placeholder="请输入现住完整详细地址"
        />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="民族">
        <el-select
          v-model="formState.nation"
          class="input-block"
          placeholder="请选择民族"
        >
          <el-option
            v-for="item in nations"
            :key="item.id"
            :label="item.nation"
            :value="item.id"
          >
          </el-option
        ></el-select>
      </el-form-item>

      <el-form-item class="grid-item mr_unset" label="是否新增患者">
        <el-select
          v-model="formState.isAdded"
          class="input-block"
          placeholder="请选择是否新增患者"
        >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option
        ></el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="省份">
        <el-select
          v-model="formState.province"
          class="input-block"
          placeholder="请选择省份"
        >
          <el-option
            v-for="item in divisions"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="城市">
        <el-select
          v-model="formState.city"
          class="input-block"
          placeholder="请选择城市"
        >
          <el-option
            v-for="item in cities"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="县城">
        <el-select
          v-model="formState.county"
          class="input-block"
          placeholder="请选择县城"
        >
          <el-option
            v-for="item in areas"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="乡镇（街道）">
        <el-select
          v-model="formState.town"
          class="input-block"
          placeholder="请选择乡镇（街道）"
        >
          <el-option
            v-for="item in streets"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="多人群分类">
        <el-select
          v-model="formState.audienceCategory"
          class="input-block"
          placeholder="请选择多人群分类"
        >
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option
        ></el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="本人联系电话">
        <el-input
          v-model="formState.contactNumber"
          placeholder="请输入本人联系电话"
        />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="学校">
        <el-input v-model="formState.school" placeholder="请输入学校" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="班级">
        <el-input v-model="formState.className" placeholder="请输入班级" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="寺庙名称">
        <el-input v-model="formState.templeName" placeholder="请输入寺庙名称" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="是否筛查">
        <el-select
          v-model="formState.isFilter"
          class="input-block"
          placeholder="请选择是否筛查"
        >

        <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option
        >
        </el-select>
      </el-form-item>

      <el-form-item class="grid-item mr_unset" label="实际筛查时间">
        <el-date-picker
          class="input-block"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="grid-item mr_unset"></el-form-item>
      <el-form-item class="grid-item mr_unset t_right">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="submitForm('queryForm')"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetForm('queryForm')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['system:role:add']"
          @click="openEditor"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['system:role:export']"
          @click="downloadTemplate"
          >下载模板</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['system:role:export']"
          @click="downloadData"
          >导出摸底表</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['system:role:export']"
          @click="importData"
          >导入</el-button
        >
      </el-col>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="searchTableData"
      ></right-toolbar>
    </el-row>

    <el-table :data="tableData">
      <el-table-column
        align="center"
        prop="idNumber"
        label="证件号码"
        :show-overflow-tooltip="true"
        width="200"
      />
      <el-table-column
        align="center"
        prop="isAdded"
        label="是否新增"
        :show-overflow-tooltip="true"
        width="80"
      >
        <template slot-scope="scope">
          {{ scope.row.isAdded | state }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="isUrgency"
        label="是否紧急"
        :show-overflow-tooltip="true"
        width="80"
      >
        <template slot-scope="scope">
          {{ scope.row.isUrgency | state }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="isFilter"
        label="是否筛查"
        :show-overflow-tooltip="true"
        width="80"
      >
        <template slot-scope="scope">
          {{ scope.row.isFilter | state }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        :show-overflow-tooltip="true"
        width="150"
      />

      <el-table-column
        align="center"
        prop="region"
        label="地区"
        :show-overflow-tooltip="true"
        width="300"
      />
      <el-table-column
        align="center"
        prop="gender"
        label="性别"
        :show-overflow-tooltip="true"
        width="60"
      >
        <template slot-scope="scope">
          {{ scope.row.gender | gender }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="age"
        label="年龄"
        :show-overflow-tooltip="true"
        width="60"
      />
      <el-table-column
        align="center"
        prop=""
        label="第一人群分类"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        align="center"
        prop="audienceCategory"
        label="多人群分类"
        :show-overflow-tooltip="true"
        width="150"
      >
        <template slot-scope="scope">
          {{ scope.row.audienceCategory | type }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="nation"
        label="名族"
        :show-overflow-tooltip="true"
        width="60"
      />
      <el-table-column
        align="center"
        prop="school"
        label="学校"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        align="center"
        prop="className"
        label="班级"
        :show-overflow-tooltip="true"
        width="80"
      />
      <el-table-column
        align="center"
        prop="templeName"
        label="寺庙"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        align="center"
        prop="filterTime"
        label="实际筛查时间"
        :show-overflow-tooltip="true"
        width="180"
      />
      <el-table-column
        align="center"
        prop="remark"
        label="备注"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        align="center"
        label="操作"
        fixed="right"
        :show-overflow-tooltip="true"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openEditor(scope.row)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="openEditor(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pagination.total > 0"
      :total="pagination.total"
      :limit.sync="pagination.pageSize"
      :page.sync="pagination.currentPage"
      @pagination="handleCurrentChange"
    />

    <Editor
      :visible="isShowEditor"
      :state="current"
      @submit="handleSubmit"
      @cancel="handleCancel"
    ></Editor>
  </div>
</template>

<script>
import { genders, status, types } from "@/model/options";
import { getNations, getPcas } from "@/api/common";
import { searchStateList } from "@/api/patient/state.api";
import Editor from "./editor.vue";
import { scrub } from "@/filter/withdraw";

export default {
  name: "State",
  components: {
    Editor,
  },
  data() {
    return {
      showSearch: true,
      genders,
      status,
      types,
      formState: {
        idNumber: "",
        name: "",
        gender: "",
        age: "",
        address: "",
        nation: "",
        isAdded: "",
        province: "",
        city: "",
        county: "",
        town: "",
        audienceCategory: "",
        contactNumber: "",
        school: "",
        className: "",
        templeName: "",
        isFilter: "",
        screeningTime: "",
      },
      tableData: [],
      pagination: {
        total: 0,
        pageCount: 0,
        pageSize: 0,
        currentPage: 0,
      },
      divisions: [],
      cities: [],
      areas: [],
      streets: [],
      isShowEditor: false,
      current: {},
    };
  },
  watch: {
    "formState.province": function (value) {
      if (!value) {
        this.cities = [];
      } else {
        const result = this.divisions.find((item) => item.code === value);
        this.cities = result.children || [];
      }
      this.formState.city = "";
    },
    "formState.city": function (value) {
      if (!value) {
        this.areas = [];
      } else {
        const result = this.cities.find((item) => item.code === value);
        this.areas = result.children || [];
      }
      this.formState.county = "";
    },
    "formState.county": function (value) {
      if (!value) {
        this.streets = [];
      } else {
        const result = this.areas.find((item) => item.code === value);
        this.streets = result.children || [];
      }
      this.formState.town = "";
    },
  },
  computed: {},
  methods: {
    async getData() {
      this.nations = (await getNations()) || [];
      this.divisions = (await getPcas()) || [];
    },

    async searchTableData() {
      const result = await searchStateList({
        ...scrub(this.formState),
        page: this.pagination.currentPage,
        limit: this.pagination.pageSize,
      });
      const { list, pagination } = result;
      this.tableData = list;
      this.pagination = pagination;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchTableData();
        }
      });
    },
    resetForm() {
      this.formState = {
        idNumber: "",
        name: "",
        gender: "",
        age: "",
        address: "",
        nation: "",
        isAdded: "",
        province: "",
        city: "",
        county: "",
        town: "",
        audienceCategory: "",
        contactNumber: "",
        school: "",
        className: "",
        templeName: "",
        isFilter: "",
        screeningTime: "",
      };
    },
    openEditor(data = {}) {
      this.current = data;
      // console.log('row', row)
      this.isShowEditor = true;
    },
    downloadTemplate() {},
    downloadData() {},
    importData() {},
    handleCurrentChange() {
      this.searchTableData();
    },
    handleSubmit(formName) {},
    handleCancel() {
      this.isShowEditor = false;
      console.log(" this.isShowEditor", this.isShowEditor);
    },
  },
  mounted() {
    this.getData();
    this.searchTableData();
  },
};
</script>
<style>
.mr_unset {
  margin-right: unset !important;
}
</style>
